<template>
  <div>
    <!-- 基本信息 -->
    <div class="baseInfoRight">
      <h4 class="withVerticleLineT4 title14">{{ $t('basicInformation') }}</h4>
      <div class="baseInfoItems">
        <a-row class="baseInfoItem">
          <a-col :md="10" :sm="14">{{ $t('serviceCode') }}</a-col>
          <a-col :md="14" :sm="10" class="result">
            <table-ellipsis :text="serviceInfor.serviceCode || '-'"></table-ellipsis>
          </a-col>
        </a-row>
        <!-- 服务名称 -->
        <a-row class="baseInfoItem">
          <a-col :md="10" :sm="14">{{ $t('serviceName') }}</a-col>
          <a-col :md="14" :sm="10" class="result">
            <table-ellipsis :text="serviceInfor.serviceName || '-'"></table-ellipsis>
          </a-col>
        </a-row>
        <!-- 服务归属域 -->
        <a-row class="baseInfoItem">
          <a-col :md="10" :sm="14">{{ $t('fwgsy') }}</a-col>
          <a-col :md="14" :sm="10" class="result">
            <table-ellipsis :text="serviceSaleBelongFlagObjText[serviceInfor.serviceBelong] || '-'"></table-ellipsis>
          </a-col>
        </a-row>
        <!-- 服务分类 -->
        <a-row class="baseInfoItem">
          <a-col :md="10" :sm="14">{{ $t('fwfl') }}</a-col>
          <a-col :md="14" :sm="10" class="result">
            <table-ellipsis :text="serviceSaleCateFlagObjText[serviceInfor.serviceCategory] || '-'"></table-ellipsis>
          </a-col>
        </a-row>
        <!-- 是否需学习 -->
        <a-row class="baseInfoItem">
          <a-col :md="10" :sm="14">{{ $t('needToLearn') }}</a-col>
          <a-col :md="14" :sm="10" class="result">
            <table-ellipsis :text="chooseYesNoTypeObj[serviceInfor.needStudy] || '-'"></table-ellipsis>
          </a-col>
        </a-row>
        <!-- 学习地址 -->
        <a-row class="baseInfoItem">
          <a-col :md="10" :sm="14">{{ $t('learnUrl') }}</a-col>
          <a-col :md="14" :sm="10" class="result">
            <a @click="handlerView(JSON.parse(serviceInfor.studyUrls).join('\n'), 'learnUrl')" v-if="serviceInfor.needStudy != 0">
              {{ $t('view') }}
            </a>
            <span v-else>暂无数据</span>
          </a-col>
        </a-row>
        <!-- 考试地址 -->
        <a-row class="baseInfoItem">
          <a-col :md="10" :sm="14">{{ $t('examUrl') }}</a-col>
          <a-col :md="14" :sm="10" class="result">
            <a @click="handlerView(serviceInfor.examUrl, 'examUrl')" v-if="serviceInfor.needStudy != 0">
              {{ $t('view') }}
            </a>
            <span v-else>暂无数据</span>
          </a-col>
        </a-row>
        <!-- 服务说明 -->
        <a-row class="baseInfoItem">
          <a-col :md="10" :sm="14">{{ $t('serviceExplain') }}</a-col>
          <a-col :md="14" :sm="10" class="result">
            <a @click="handlerView(serviceInfor.serviceExplain, 'serviceExplain')">
              {{ $t('view') }}
            </a>
          </a-col>
        </a-row>
        <!-- 服务介绍 -->
        <a-row class="baseInfoItem">
          <a-col :md="10" :sm="14">{{ $t('serviceIntroduce') }}</a-col>
          <a-col :md="14" :sm="10" class="result">
            <a @click="handlerView(serviceInfor.serviceDesc, 'serviceIntroduce')">
              {{ $t('view') }}
            </a>
          </a-col>
        </a-row>
      </div>
    </div>
    <!-- 操作信息 -->
    <div class="baseInfoRight">
      <h4 class="withVerticleLineT4 title14">{{ $t('operationInfo') }}</h4>
      <div class="baseInfoItems">
        <!-- 创建时间 -->
        <a-row class="baseInfoItem">
          <a-col :md="10" :sm="14">{{ $t('timeOfCreation') }}</a-col>
          <a-col :md="14" :sm="10" class="result">
            <table-ellipsis
              :text="serviceInfor.createTime ? $options.filters.moment(serviceInfor.createTime) : '_'"
            ></table-ellipsis>
          </a-col>
        </a-row>
        <!-- 创建人 -->
        <a-row class="baseInfoItem">
          <a-col :md="10" :sm="14">{{ $t('creator') }}</a-col>
          <a-col :md="14" :sm="10" class="result">
            <table-ellipsis :text="serviceInfor.createBy"></table-ellipsis>
          </a-col>
        </a-row>
      </div>
    </div>
    <!-- 查看弹框 -->
    <service-view-modal :contentStr="viewContentStr" :title="viewTitle" ref="viewModalRef"> </service-view-modal>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import ServiceViewModal from '@/views/components/ServiceViewModal.vue'
export default {
  name: 'DetailServiceInfor',
  computed: {
    ...mapState({
      instantUpdateTime: (state) => state.app.instantUpdateTime
    }),
    serviceSaleCateFlagObjText () {
      return this.$store.getters.getDictCodeObj('serviceSaleCateFlagDictCode')
    },
    serviceSaleBelongFlagObjText () {
      return this.$store.getters.getDictCodeObj('serviceSaleBelongFlagDictCode')
    },
    chooseYesNoTypeObj () {
      return this.$store.getters.chooseYesNoTypeObj()
    }
  },
  components: {
    TableEllipsis,
    ServiceViewModal
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      serviceInfor: {},
      viewContentStr: '',
      viewTitle: ''
    }
  },
  mounted () {
    this.$store.dispatch('getServiceSaleCateFlagDictCodeData')
    this.$store.dispatch('getServiceSaleBelongFlagDictCodeData')
  },
  methods: {
    getserviceInfor () {
      const vm = this
      vm.$api.findPublishById({ id: vm.id }).then((res) => {
        vm.serviceInfor = res.data
      })
    },
    handlerView (content, title) {
      this.viewContentStr = content
      this.viewTitle = title
      this.$refs.viewModalRef.visible = true
    }
  },
  watch: {
    // 切换任务名称时重新请求数据
    instantUpdateTime: {
      handler () {
        this.getserviceInfor()
      },
      immediate: true
    }
  }
}
</script>
